<template>
  <div style="font-size: 20px; font-weight: bold; width: 100%;margin-bottom: 20px">心法数据统计</div>
  <div style="justify-content: left;align-items: center;display: flex;">
    <el-select v-model="instance" size="small" style="width:160px;margin-right:20px" placeholder="请选择副本">
      <el-option-group label="万灵当歌赛季">
        <el-option label="九老洞（25人英雄）" value="25人英雄九老洞"></el-option>
        <el-option label="九老洞（25人普通）" value="25人普通九老洞"></el-option>
      </el-option-group>
      <el-option-group label="群侠万变赛季">
        <el-option label="武狱黑牢（25人英雄）" value="25人英雄武狱黑牢"></el-option>
        <el-option label="武狱黑牢（25人普通）" value="25人普通武狱黑牢"></el-option>
      </el-option-group>
      <el-option-group label="横刀断浪赛季">
        <el-option label="西津渡（25人英雄）" value="25人英雄西津渡"></el-option>
        <el-option label="西津渡（25人普通）" value="25人普通西津渡"></el-option>
      </el-option-group>
    </el-select>
    <el-select v-model="boss" size="small" style="width:160px" placeholder="请选择首领">
      <el-option v-for="item in bossTable" :label="item" :value="item"></el-option>
    </el-select>
    <text class="text1">职责</text>
    <el-radio-group v-model="duty" size="small" style="margin-left: 10px">
      <el-radio-button label="tank" >坦克</el-radio-button>
      <el-radio-button label="healer">治疗</el-radio-button>
      <el-radio-button label="dps">所有DPS</el-radio-button>
      <el-radio-button label="physics">外功DPS</el-radio-button>
      <el-radio-button label="magic">内功DPS</el-radio-button>
    </el-radio-group>
    <text class="text1">数值</text>
    <el-radio-group style="margin-left:10px;" v-model="orderby" size="small">
      <el-radio-button label="rdps">rDPS</el-radio-button>
      <el-radio-button label="ndps">nDPS</el-radio-button>
      <el-radio-button label="mrdps">mrDPS</el-radio-button>
      <el-radio-button label="mndps">mnDPS</el-radio-button>
      <el-radio-button label="rhps" v-if="duty=='healer'">rHPS</el-radio-button>
    </el-radio-group>
    <text class="text1">排序</text>
    <el-radio-group style="margin-left:10px;" v-model="sortby" size="small">
      <el-radio-button label="min">下边缘</el-radio-button>
      <el-radio-button label="Q1">25百分位</el-radio-button>
      <el-radio-button label="medium">中位数</el-radio-button>
      <el-radio-button label="Q2">75百分位</el-radio-button>
      <el-radio-button label="max">上边缘</el-radio-button>
    </el-radio-group>
  </div>
  <div style="height: 600px;width: 90vw;margin-top: 40px">
    <v-chart v-if="!loading" :option="options"></v-chart>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import axios from "axios";
import {computed} from "vue";

const bossTable = computed(()=>{
  if (instance.value === '25人英雄九老洞' || instance.value === '25人普通九老洞'){
    return ['魏华','钟不归','岑伤','鬼筹','麒麟','月泉淮']
  }
  else if (instance.value === '25人英雄武狱黑牢' || instance.value === '25人普通武狱黑牢'){
    return ['时风','乐临川','牛波','和正','武云阙','翁幼之']
  }
  else if (instance.value === '25人英雄西津渡' || instance.value === '25人普通西津渡'){
    return ['张景超','刘展','苏凤楼','韩敬青','藤原佑野','李重茂']
  }
})

const instance = ref('')

const boss = ref('')

const orderby = ref('rdps')

const sortby = ref('Q2')

const loading = ref(true)

const rawData = ref([])

const duty = ref('dps')

const dpsArray = ref({
    'tank':[],
    'healer':[],
    'dps':[],
    'physics':[],
    'magic':[]
})

const dimension = ref({
  'tank':[],
  'healer':[],
  'dps':[],
  'physics':[],
  'magic':[]
})

watch(()=>instance.value,(newValue)=>{
  boss.value = ''
})

const sortData = () =>{
  const mySort = (x,y) => {
    switch(sortby.value){
      case 'min':
        return x.value[0] - y.value[0]
        break
      case 'Q1':
        return x.value[1] - y.value[1]
        break
      case 'medium':
        return x.value[2] - y.value[2]
        break
      case 'Q2':
        return x.value[3] - y.value[3]
        break
      case 'max':
        return x.value[4] - y.value[4]
        break
    }
  }
  dpsArray.value[duty.value].sort(mySort)
  let label = []
  for (let item of dpsArray.value[duty.value]){
    console.log(item)
    label.push({
      value:item.name,
      textStyle:{
        color:item.itemStyle.color
      }
    })
  }
  dimension.value[duty.value] = label
}

watch(()=>sortby.value,(newValue,oldValue)=>{
  sortData()
},{immediate:true})

const occTable = {
  "xisuijing": {
    'color':'rgb(210, 180, 0)',
    'name':'洗髓经',
    'duty':'tank'
  },
  "yijinjing": {
    'color':'rgb(210, 180, 0)',
    'name':'易筋经',
    'duty':'magic'
  },
  "huajianyou": {
    'color':'rgb(127, 31, 223)',
    'name':'花间游',
    'duty':'magic'
  },
  "lijingyidao": {
    'color':'rgb(127, 31, 223)',
    'name':'离经易道',
    'duty':'healer'
  },
  "zixiagong": {
    'color':'rgb(56, 175, 255)',
    'name':'紫霞功',
    'duty':'magic'
  },
  "taixujianyi": {
    'color':'rgb(56, 175, 255)',
    'name':'太虚剑意',
    'duty':'physics'
  },
  "yunchangxinjing": {
    'color':'rgb(255, 127, 255)',
    'name':'云裳心经',
    'duty':'healer'
  },
  "bingxinjue": {
    'color':'rgb(255, 127, 255)',
    'name':'冰心诀',
    'duty':'magic'
  },
  "tielaolv": {
    'color':'rgb(160, 0, 0)',
    'name':'铁牢律',
    'duty':'tank'
  },
  "aoxuezhanyi": {
    'color':'rgb(160, 0, 0)',
    'name':'傲血战意',
    'duty':'physics'
  },
  "wenshuijue": {
    'color':'rgb(220, 220, 0)',
    'name':'问水诀',
    'duty':'physics'
  },
  "xiaochenjue": {
    'color':'rgb(205, 133, 63)',
    'name':'笑尘诀',
    'duty':'physics'
  },
  "mingzunliuliti": {
    'color':'rgb(253, 84, 0)',
    'name':'明尊琉璃体',
    'duty':'tank'
  },
  "fenyingshengjue": {
    'color':'rgb(253, 84, 0)',
    'name':'焚影圣诀',
    'duty':'magic'
  },
  "butianjue": {
    'color':'rgb(63, 31, 159)',
    'name':'补天诀',
    'duty':'healer'
  },
  "dujing": {
    'color':'rgb(63, 31, 159)',
    'name':'毒经',
    'duty':'magic'
  },
  "tianluoguidao": {
    'color':'rgb(0, 133, 144)',
    'name':'天罗诡道',
    'duty':'magic'
  },
  "jingyujue": {
    'color':'rgb(0, 133, 144)',
    'name':'惊羽诀',
    'duty':'physics'
  },
  "tieguyi": {
    'color':'rgb(180, 60, 0)',
    'name':'铁骨衣',
    'duty':'tank'
  },
  "fenshanjin": {
    'color':'rgb(180, 60, 0)',
    'name':'分山劲',
    'duty':'physics'
  },
  "xiangzhi": {
    'color':'rgb(100, 250, 180)',
    'name':'相知',
    'duty':'healer'
  },
  "mowen": {
    'color':'rgb(100, 250, 180)',
    'name':'莫问',
    'duty':'magic'
  },
  "beiaojue": {
    'color':'rgb(71, 73, 166)',
    'name':'北傲诀',
    'duty':'physics'
  },
  "linghaijue": {
    'color':'rgb(195, 171, 227)',
    'name':'凌海诀',
    'duty':'physics'
  },
  "yinlongjue": {
    'color':'rgb(161, 9, 34)',
    'name':'隐龙诀',
    'duty':'physics'
  },
  "taixuanjing": {
    'color':'rgb(166, 83, 251)',
    'name':'太玄经',
    'duty':'magic'
  },
  "lingsu": {
    'color':'rgb(0, 172, 153)',
    'name':'灵素',
    'duty':'healer'
  },
  "wufang": {
    'color':'rgb(0, 172, 153)',
    'name':'无方',
    'duty':'magic'
  },
  "gufengjue": {
    'color':'rgb(107, 183, 242)',
    'name':'孤锋诀',
    'duty':'physics'
  },
  "shanhaixinjue": {
    'color':'rgb(255, 255, 255)',
    'name':'山海心诀',
    'duty':'physics'
  }
}

watch(()=>[instance.value,boss.value,duty.value,orderby.value],(newValue,oldValue)=>{
  if (duty.value != 'healer' && orderby.value == 'rhps'){
    orderby.value = 'rdps'
  }
  if (instance.value && boss.value && duty.value && orderby.value){
    axios({
      method:'get',
      url:`http://120.48.95.56:8009/getXinfaRank?map=${instance.value}&boss=${boss.value}&orderby=${orderby.value}`
    }).then((res)=>{
      if(res.data.available == 1){
        console.log(res.data)
        let array = {
          'tank':[],
          'healer':[],
          'dps':[],
          'physics':[],
          'magic':[]
        }
        for (let item of res.data.result){
          let data = {
            value:[
              item.value[5].toFixed(0),
              item.value[25].toFixed(0),
              item.value[50].toFixed(0),
              item.value[75].toFixed(0),
              item.value[95].toFixed(0)
            ],
            name:occTable[item.name].name,
            itemStyle:{
              color:occTable[item.name].color,
              borderColor:'#FFFFFF'
            }
          }
          switch (occTable[item.name].duty){
            case 'tank':
              array.tank.push(data)
              break
            case 'healer' :
              array.healer.push(data)
              break
            case 'physics':
              array.physics.push(data)
              array.dps.push(data)
              break
            case 'magic':
              array.magic.push(data)
              array.dps.push(data)
              break
          }
        }
        dpsArray.value = array
        sortData()
        loading.value = false
      }
    })
  }
})

const options = computed(()=>{
  return {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid:{
      top:'0px'
    },
    yAxis: {
      type: 'category',
      boundaryGap: true,
      nameGap: 30,
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      },
      data:dimension.value[duty.value]
    },
    xAxis: {
      type: 'value',
      splitArea: {
        show: false
      }
    },
    series: {
      type:'boxplot',
      data:dpsArray.value[duty.value]
    }
  };
})


</script>

<style scoped>
.text1{
  font-size: 12px;
  margin-left: 10px;
  color:rgb(207, 211, 220)
}
</style>